var $ = jQuery.noConflict();
var curProgress = 0;
var canSubmit = true;

$(document).ready(function(){
	intializeBanner();
    registQuickEnquiry();
    contactUs();
    registerTuition();
    registerEmployment();
    uploadCV();
});

function intializeBanner(){
    $('#banner-slide').bjqs({
        animtype    : 'slide',
        height      : 310,
        width       : 620,
        showmarkers : false,
        usecaptions : false,
        responsive  : true,
        randomstart : true
    });

    $("ul.bjqs-controls li a")
        .css({ opacity: 0.6 })
        .mouseenter(function(){
            $(this).css({opacity: 1});
        })
        .mouseleave(function(){
            $(this).css({opacity: 0.6});
    });
}

function resetForm(form){
	$(form + ' input, ' + form + ' textarea').val('');
	$(form + ' select').prop('selectedIndex', 0);
}

function setModelBody(title, message){
	$('#myModal .modal-header #myModalLabel').html(title);
	$('#myModal .modal-body').html(message);
}

function setModelBody(title, message, code){
	$('#myModal .modal-header #myModalLabel').html(title);
	if(code==1){
		message = "<div class='success'>"+message+"</div>";
	} else {
		message = "<div class='fail'>"+message+"</div>";
	}
	$('#myModal .modal-body').html(message);
}

function showModalButtonClose(isShow){
    if(isShow){
        $('#myModal .modal-header .close').show();
        $('#myModal .modal-footer .btn.btn-primary').show();
    } else {
        $('#myModal .modal-header .close').hide();
        $('#myModal .modal-footer .btn.btn-primary').hide();
    }
}

function progressHTML(){
    dialogBody = '<p><strong>Request is sending . Wait....</strong></p>';
    dialogBody += '<div class="progress progress-striped active">';
    dialogBody += '<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">';
    dialogBody += '</div></div>';
    return dialogBody;
}

function doIncrement(){
    curProgress += Math.floor((Math.random()*10)+1);
    if(curProgress>90){
        clearInterval();
        curProgress = 98;
    }
    $('#myModal div.modal-body div.progress-bar').css('width', curProgress + '%');
}

function progressAForm(button, form, modalTitle, evtAfter){
    $(button).click(function(){
        bValid = $(form).validate();
        if(bValid && canSubmit){
            if(form==='#frm-private-employment'){
                canSubmit = false;
            }
            showModalButtonClose(false);
            setModelBody(modalTitle, progressHTML());
            $('#myModal').modal({
                keyboard: false,
                backdrop : 'static'
            });
            data = $(form).serialize() + '&action=' + $(this).attr('action');
            theAjax(data, evtAfter);
            setInterval(function(){doIncrement();},1000);
        }
    });
}

function evtAfterProgressAForm(form, modalTitle, response){
    rep = $.parseJSON(response);
    if(rep['code']==1){
        resetForm(form);
    }
    setModelBody(modalTitle, rep['message'], rep['code']);
    showModalButtonClose(true);
    clearInterval();
    curProgress = 0;
    $('#myModal div.modal-body div.progress-bar').css('width', '0%');
}

function registQuickEnquiry(){
    progressAForm('#btn-quick-enquiry-form', '#frm-quick-enquiry-form', 'Quick Enquiry Form', evtAfterQuickEnquiry);
}

function evtAfterQuickEnquiry(response){
    evtAfterProgressAForm('#frm-quick-enquiry-form', 'Quick Enquiry Form', response);
}

function contactUs(){
    progressAForm('#btn-private-contact', '#frm-private-contact', 'Contact', evtAfterContact);
}

function evtAfterContact(response){
    evtAfterProgressAForm('#frm-private-contact', 'Contact', response);
}

function registerTuition(){
    progressAForm('#btn-private-tuition', '#frm-private-tuition', 'Private Tuition', evtAfterTuition);
}

function evtAfterTuition(response){
    evtAfterProgressAForm('#frm-private-tuition', 'Private Tuition', response);
}

function registerEmployment(){
    progressAForm('#btn-private-employment', '#frm-private-employment', 'Private Employment', evtAfterEmployment);
}

function evtAfterEmployment(response){
    evtAfterProgressAForm('#frm-private-employment', 'Private Employment', response);
}

function uploadCV(){
    var uploadProgress = $('#upload-cv-progress');
    var bar = $('#upload-cv-progress .progress-bar');
    var percentValue = "0%";
    $('#frm-private-employment').ajaxForm({
        uploadProgress: function(event, position, total, percentComplete) {
    		uploadProgress.removeClass('hidden');
            var percentValue = percentComplete + '%';
            bar.css({width:percentValue}).html(percentValue).show();
    	},
    	success: function() {
    		var percentValue = '100%';
    		bar.css({width:percentValue}).html(percentValue);
    	},
    	complete: function(xhr) {
            var result = $.parseJSON(xhr.responseText);
            if(result.code==1){
                $('#employment-cv').val(result.name);
                canSubmit = true;
            } else {
                var pValidate = uploadProgress.parent().find('label p.validate-error');
                var message = $('#employment-cv').attr('data-validate-message');
                if(pValidate.length != 0){
                    pValidate.html(message);
                } else {
                    uploadProgress.parent().find('label').append("<p class='validate-error'>" + message + "</p>");
                }
                canSubmit = false;
            }
            uploadProgress.fadeOut('slow');
    	}
    });
    $('#employment-cv-input').change(function(){
        var pValidate = uploadProgress.parent().find('label p.validate-error');
        if(pValidate.length != 0){
            pValidate.remove();
        }
        $('#employment-btn-upload').click();
    });
}